<template>
  <el-container class="withdraw-page panel-block">
    <el-header class="sa-header">
      <el-tabs class="sa-tabs" v-model="filterParams.data.status" @tab-change="getData(1)">
        <el-tab-pane
          v-for="sl in statusList"
          :key="sl"
          :label="sl.name"
          :name="sl.type"
        ></el-tab-pane>
      </el-tabs>
      <div class="sa-title sa-flex sa-row-between">
        <div class="label sa-flex">
          <span class="left">用户提现</span>
          <search-condition
            :conditionLabel="filterParams.conditionLabel"
            @deleteFilter="deleteFilter"
          ></search-condition>
        </div>
        <div>
          <el-button
            v-auth="'shop.admin.trade.order.list'"
            class="sa-button-refresh"
            icon="RefreshRight"
            @click="getData()"
          ></el-button>
          <el-button class="sa-button-refresh" icon="Search" @click="openFilter"></el-button>
        </div>
      </div>
    </el-header>
    <el-main class="sa-p-0">
      <div class="sa-table-wrap panel-block panel-block--bottom" v-loading="loading">
        <template v-if="table.data.length > 0">
          <el-table
            height="100%"
            class="sa-table"
            :data="table.data"
            @selection-change="changeSelection"
            @sort-change="fieldFilter"
            row-key="id"
            stripe
          >
            <el-table-column type="selection" width="48" align="center"> </el-table-column>
            <el-table-column prop="id" label="ID" min-width="100" sortable="custom">
            </el-table-column>
            <el-table-column label="申请用户" min-width="158">
              <template #default="scope">
                <sa-user-profile :user="scope.row.user" :id="scope.row.user_id" />
              </template>
            </el-table-column>
            <el-table-column label="实际到账/提现金额" min-width="166" align="center">
              <template #default="scope">
                <div class="sa-table-line-1">
                  {{ scope.row.paid_fee }}/{{ scope.row.amount || '-' }}元
                </div>
              </template>
            </el-table-column>
            <el-table-column label="费率/手续费" min-width="132" align="center">
              <template #default="scope">
                <div class="sa-table-line-1">
                  {{ scope.row.charge_rate_format }}/{{ scope.row.charge_fee || '-' }}元
                </div>
              </template>
            </el-table-column>
            <el-table-column label="提现方式" min-width="130" align="center">
              <template #default="scope">
                <div class="sa-flex">
                  <img
                    :src="`./static/images/shop/order/${
                      scope.row.withdraw_type == 'alipay'
                        ? 'ali'
                        : scope.row.withdraw_type == 'wechat'
                        ? 'wechaticon'
                        : 'bankicon'
                    }.png`"
                    class="pay-img sa-m-r-8"
                    v-if="scope.row.withdraw_type"
                  />
                  <div>
                    {{
                      scope.row.withdraw_type == 'bank'
                        ? '银行卡'
                        : scope.row.withdraw_type == 'wechat'
                        ? '微信零钱'
                        : '支付宝账户'
                    }}
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="打款信息" min-width="240" align="center">
              <template #default="scope">
                <div class="sa-flex-col sa-col-top">
                  <div v-for="(i, j) in scope.row.withdraw_info" :key="i" class="sa-flex">
                    <div class="withdraw-info sa-table-line-1"> {{ j }}:{{ i }} </div>
                    <sa-svg
                      class="copy sa-m-l-4 cursor-pointer"
                      name="sa-copy"
                      @click="useClip(i)"
                    ></sa-svg>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="申请时间" min-width="176" align="center">
              <template #default="scope">
                {{ scope.row.create_time || '-' }}
              </template>
            </el-table-column>
            <el-table-column label="上次操作时间" min-width="176" align="center">
              <template #default="scope">
                {{ scope.row.update_time || '-' }}
              </template>
            </el-table-column>
            <el-table-column label="状态" min-width="80">
              <template #default="scope">
                <div
                  :class="
                    scope.row.status == 0
                      ? 'info'
                      : scope.row.status == 1
                      ? 'warning'
                      : scope.row.status == 2
                      ? 'success'
                      : 'danger'
                  "
                >
                  {{ scope.row.status_text }}
                </div>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" min-width="200">
              <template #default="scope">
                <el-popover
                  v-model:visible="refundPopover[scope.$index]"
                  :width="244"
                  trigger="click"
                  v-if="scope.row.status == 0"
                >
                  <div class="sa-flex sa-m-b-16">
                    <el-icon class="question sa-m-r-8"><QuestionFilled /></el-icon>
                    <div>您是否同意用户的提现申请？</div>
                  </div>
                  <div>
                    <el-button @click="refundPopover[scope.$index] = false" size="small"
                      >取消</el-button
                    >
                    <el-button @click="agree(scope.row.id, scope.$index, 'agree')" size="small"
                      >同意</el-button
                    >
                    <el-button
                      type="primary"
                      size="small"
                      @click="agree(scope.row.id, scope.$index, 'agree&withdraw')"
                      >同意&打款</el-button
                    >
                  </div>
                  <template #reference>
                    <el-button v-auth="'shop.admin.withdraw.handle'" class="is-link" type="primary"
                      >同意</el-button
                    >
                  </template>
                </el-popover>
                <el-popconfirm
                  width="fit-content"
                  confirm-button-text="同意"
                  cancel-button-text="取消"
                  title="您确定给用户立即打款吗？"
                  @confirm="agree(scope.row.id, scope.$index, 'withdraw')"
                  v-if="scope.row.status == 1"
                >
                  <template #reference>
                    <el-button v-auth="'shop.admin.withdraw.handle'" class="is-link" type="primary"
                      >立即打款</el-button
                    >
                  </template>
                </el-popconfirm>
                <el-button
                  v-auth="'shop.admin.withdraw.handle'"
                  v-if="scope.row.status == 0||scope.row.status == 1"
                  class="is-link"
                  type="danger"
                  @click="onOpenRefuse(scope.row)"
                  >拒绝</el-button
                >
                <el-button
                  v-auth="'shop.admin.withdraw.log'"
                  class="is-link action"
                  type="primary"
                  @click="onOpenAction(scope.row)"
                  >日志</el-button
                >
				<el-button
					v-if="scope.row.invoice_id"
                  v-auth="'shop.admin.withdraw.invoice'"
                  class="is-link"
                  type="primary"
                  @click="onOpenInvoice(scope.row)"
                  >发票信息</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
        <template v-if="table.data.length == 0 && !loading">
          <sa-empty></sa-empty>
        </template>
      </div>
    </el-main>
    <sa-view-bar>
      <template #left>
        <sa-batch-handle
          :batchHandleTools="batchHandleTools"
          :selectedLeng="table.selected.length"
          @batchHandle="batchHandle"
          v-if="filterParams.data.status == 0"
        ></sa-batch-handle>
        <sa-batch-handle
          :batchHandleTools="processingTools"
          :selectedLeng="table.selected.length"
          @batchHandle="batchHandle"
          v-if="filterParams.data.status == 1"
        ></sa-batch-handle>
      </template>
      <template #right>
        <sa-pagination :pageData="pageData" @updateFn="getData" />
      </template>
    </sa-view-bar>
  </el-container>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue';
import { api } from './withdraw.service';
import { ElMessageBox } from 'element-plus';
import { useModal } from '@/sheep/hooks';
import { useSearch } from '@/sheep/components/sa-table/sa-search/useSearch';
import { usePagination } from '@/sheep/hooks';
import useClip from '@/sheep/utils/clipboard.js';
import { composeFilter } from '@/sheep/utils';
import WithdrawAction from './action.vue';
import WithdrawRefuse from './refuse.vue';
import WithdrawInvoice from './invoice.vue';
import { cloneDeep } from 'lodash';

  const refundPopover = reactive({});
  // 列表
  const table = reactive({
    data: [],
    order: '',
    sort: '',
    selected: [],
  });
  const statusList = [
    {
      name: '全部',
      type: 'all',
    },
    {
      name: '待审核',
      type: '0',
    },
    {
      name: '处理中',
      type: '1',
    },
    {
      name: '已处理',
      type: '2',
    },
    {
      name: '已拒绝',
      type: '-1',
    },
  ];
  const { pageData } = usePagination();
  const batchHandleTools = [
    {
      type: 'agree',
      label: '同意',
      auth: 'shop.admin.withdraw.handle',
      class: 'success',
    },
    {
      type: 'agree&withdraw',
      label: '同意&打款',
      auth: 'shop.admin.withdraw.handle',
      class: 'success',
    },
    {
      type: 'refuse',
      label: '拒绝',
      auth: 'shop.admin.withdraw.handle',
      class: 'danger',
    },
  ];
  const processingTools = [
    {
      type: 'withdraw',
      label: '立即打款',
      auth: 'shop.admin.withdraw.handle',
      class: 'success',
    },
  ];
  const filterParams = reactive({
    tools: {
      status: { label: '用户信息', value: 'all' },
      user: {
        type: 'tinputprepend',
        label: '用户信息',
        field: 'user',
        placeholder: '请输入查询内容',
        user: {
          field: 'user_id',
          value: '',
        },
        options: [
          {
            label: '用户ID',
            value: 'user_id',
          },
          {
            label: '用户昵称',
            value: 'user.nickname',
          },
          {
            label: '用户手机号',
            value: 'user.mobile',
          },
        ],
      },
      withdraw_type: {
        type: 'tselect',
        label: '提现方式',
        field: 'withdraw_type',
        value: '',
        options: {
          data: [
            {
              label: '全部',
              value: '',
            },
            {
              label: '支付宝账户',
              value: 'alipay',
            },
            {
              label: '微信零钱',
              value: 'wechat',
            },
            {
              label: '银行卡',
              value: 'bank',
            },
          ],
        },
      },
      create_time: {
        type: 'tdatetimerange',
        label: '下单时间',
        field: 'create_time',
        value: [],
      },
      update_time: {
        type: 'tdatetimerange',
        label: '上次操作时间',
        field: 'update_time',
        value: [],
      },
    },
    data: {
      user: { field: 'user_id', value: '' },
      withdraw_type: '',
      create_time: [],
      update_time: [],
      status: 'all',
    },
    conditionLabel: {},
  });
  const { openFilter, deleteFilter } = useSearch({ filterParams, getData });
  // 导出订单
  async function onExport(type) {
    let tempSearch = cloneDeep(filterParams.data);
    let search = composeFilter(tempSearch, {
      user: 'like',
      withdraw_type: 'like',
      update_time: 'range',
      create_time: 'range',
    });
    api.export(type, { search: search.search });
  }
  const loading = ref(true);
  // 获取
  async function getData(page) {
    loading.value = true;
    if (page) pageData.page = page;
    let tempSearch = cloneDeep(filterParams.data);
    let search = composeFilter(tempSearch, {
      user: 'like',
      withdraw_type: 'like',
      update_time: 'range',
      create_time: 'range',
    });
    const { error, data } = await api.list({
      page: pageData.page,
      list_rows: pageData.list_rows,
      order: table.order,
      sort: table.sort,
      ...search,
    });
    if (error === 0) {
      table.data = data.data;
      pageData.page = data.current_page;
      pageData.list_rows = data.per_page;
      pageData.total = data.total;
    }
    loading.value = false;
  }

  // table 字段排序
  function fieldFilter({ prop, order }) {
    table.order = order == 'ascending' ? 'asc' : 'desc';
    table.sort = prop;
    getData();
  }
  //table批量选择
  function changeSelection(row) {
    table.selected = row;
  }

  // 立即打款单独批量可以直接调用
  async function agree(id, index, e) {
    refundPopover[index] = false;
    await api.handle(id, {
      action: e,
    });
    getData();
  }
  function onOpenAction(row) {
    useModal(WithdrawAction, {
      title: '日志',
      id: row.id,
    });
  }
  function onOpenInvoice(row) {
    useModal(WithdrawInvoice, {
      title: '发票信息',
      data: row.invoice,
    });
  }
  function onOpenRefuse(row) {
    useModal(
      WithdrawRefuse,
      {
        title: '拒绝理由',
        id: row.id,
      },
      {
        confirm: () => {
          getData();
        },
      },
    );
  }
  async function batchHandle(type) {
    let ids = [];
    table.selected.forEach((row) => {
      ids.push(row.id);
    });
    switch (type) {
      case 'refuse':
        ElMessageBox.prompt('', '拒接理由', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(async (value) => {
          await api.handle(ids.join(','), {
            action: type,
            reason: value.value,
          });
        });
        break;
      default:
        await api.handle(ids.join(','), {
          action: type,
        });
        getData();
    }
  }

  onMounted(() => {
    getData();
  });
</script>
<style lang="scss" scoped>
  .withdraw-page {
    .el-main {
      background: var(--sa-background-assist);
      .sa-table-wrap {
        height: 100%;
      }
      .pay-img {
        width: 24px;
        height: 24px;
      }
      .withdraw-info {
        max-width: 190px;
      }
      .copy {
        width: 16px;
        height: 16px;
        color: var(--el-color-primary);
      }
      .success {
        color: var(--el-color-success);
      }

      .info {
        color: var(--el-color-info);
      }
      .danger {
        color: var(--el-color-danger);
      }
      .warning {
        color: var(--el-color-warning);
      }
      .action {
        color: var(--sa-subtitle);
      }
    }
  }
  :deep() {
    .question {
      color: #faad14;
      font-size: 16px;
    }
  }
</style>
